<template>
    <div style="padding: 55px 20px;min-height: 100%;">
        <mu-paper class="paperz" :zDepth="2">

            <h2 style="text-align: center">自动评价</h2>
            <el-form :inline="true" class="demo-form-inline">

                <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions" @change="handleChange">
                </el-cascader>
                <a :href="'https://detail.tmall.com/item.htm?id='+ selectedOptions[1]?selectedOptions[1]:babyid"
                   target="_Blank">
                    {{selectedOptions[1]?selectedOptions[1]:babyid}} </a>
                <el-form-item>
                    <el-button size="small" type="primary" @click="dialogUser=true">上传
                    </el-button>
                </el-form-item>
                <span>　总数量：{{a}}　</span>
                <span>　已使用：{{b}}　</span>
                <span>　未使用：{{c}}　</span>
                <!-- <el-checkbox v-model="checked">随机每日评价</el-checkbox> -->
            </el-form>

            <br/>

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="name" label="产品名" width="100">
                </el-table-column>
                <el-table-column prop="babyId" label="宝贝ID" width="100">
                </el-table-column>
                <!--  <el-table-column prop="shop" label="店铺" width="100">
                  </el-table-column>-->

                <el-table-column prop="text1" width="160" label="好评">
                </el-table-column>
                <el-table-column prop="img2" width="180" label="好评图片">
                    <template slot-scope="props">
                        <el-form label-position="left" inline>
                            <img :src="img" v-for="img in props.row.img1"
                                 style="width: 100px;margin: 5px;height: 120px">
                        </el-form>
                    </template>
                </el-table-column>
                <!--  <el-table-column prop="day2" label="追加间隔" width="80">
                  </el-table-column>-->
                <el-table-column prop="use_num" label="使用次数" width="90">
                </el-table-column>
                <el-table-column prop="useTime" label="上次使用时间" width="140">
                    <template slot-scope="props">
                        {{props.row.useTime | timeTo(1)}}
                    </template>
                </el-table-column>
                <el-table-column prop="addTime" label="上传时间" width="140">
                    <template slot-scope="props">
                        {{props.row.addTime | timeTo(1)}}
                    </template>
                </el-table-column>
                <el-table-column prop="up_user" label="上传用户" width="100">
                </el-table-column>
                <!--  <el-table-column prop="admin" label="审核用户" width="100">
                  </el-table-column>
                  <el-table-column label="审核" width="90">
                  </el-table-column>
                  <el-table-column label="编辑" width="90">
                  </el-table-column>-->
                <el-table-column label="删除">
                    <el-button type="primary" size="mini" @click="BackupionOk">删除
                    </el-button>
                </el-table-column>
            </el-table>
        </mu-paper>

        <el-dialog title="" :visible.sync="dialogUser" custom-class="backupdedleteUserDialog" @close="list = {}">
            <el-form label-width="110px">
                <el-form-item label="宝贝ID">
                    <el-input auto-complete="off" type="text" v-model='list.babyID'></el-input>
                </el-form-item>
                <el-form-item label="追加评论">
                    <el-input auto-complete="off" type="textarea" v-model='list.text2'
                              :autosize="{ minRows: 3, maxRows: 12}"></el-input>
                </el-form-item>

                <el-form-item label="追加图片">
                    <el-upload ref="upload2" class="upload-demo" action="http://39.104.83.69:2727/v1/api/other/UploadImg" name="2" multiple
                               :data="list" :http-request="newFiles" :auto-upload="false" :limit="6"
                               :on-change="fileChange" :on-remove="handleRemove" :on-success="uploadSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button type="primary" style="width: 200px;" @click="submitUpload">上传</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog :visible.sync="dialogBackup" custom-class="dialogBackup">
            <el-form :inline="true">
                <el-form-item>
                    <el-input placeholder="请输入内容" size="mini" v-model="babyName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="getBackupList()">搜索
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData2" ref="multipleTable" @selection-change="BackupionChange" style="width: 100%">

                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column prop="useNum" label="使用次数" width="60">
                </el-table-column>
                <el-table-column prop="babyList" label="使用宝贝ID" width="80">
                </el-table-column>
                <el-table-column prop="id" label="编号" width="60">
                </el-table-column>
                <el-table-column prop="name" label="产品名" width="80">
                </el-table-column>

                <el-table-column prop="text2" label="追加评价" width="200">
                </el-table-column>
                <el-table-column prop="text1" label="追评图片" width="360">
                    <template slot-scope="props">
                        <el-form label-position="left" inline>
                            <img :src="'/upload/' + img" v-for="img in props.row.img2"
                                 style="width: 100px;margin: 5px;height: 120px">
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="添加人" width="100">
                </el-table-column>
                <el-table-column prop="useNum" label="追评金额" width="75">
                    <template slot-scope="props">
                        <el-input auto-complete="off" value="2">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="添加时间" width="180">
                    <template slot-scope="scope">
                        {{scope.row.addTime|timeTo(1)}}
                    </template>
                </el-table-column>
            </el-table>
            <br/>
            <el-pagination :page-size="20" :current-page="searchList2.pn" layout="prev, pager, next"
                           :total="searchList2.total" @current-change="pnChange2" v-if="searchList2.total > 20">
            </el-pagination>
            <div v-if="BackupionChangea[0]" style="float: left;padding: 5px">
                <el-button type="primary" size="mini" @click="BackupionOk">确定
                </el-button>
            </div>
            <br/>
        </el-dialog>
        <el-dialog :visible.sync="dialogBaby" custom-class="dialogBaby">
            <el-form>
                <el-form-item label="店铺名">
                    <el-input placeholder="请输入内容" size="small" v-model="addShopName"></el-input>
                </el-form-item>
                <el-form-item label="宝贝ID">
                    <el-input placeholder="请输入内容" size="small" v-model="addBabyId"></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input placeholder="请输入内容" size="small" v-model="addBabyName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="addBabyIda">添加
                    </el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checked: true,
                a: 0,
                b: 0,
                c: 0,
                addBabyName: "",
                addShopName: "",
                addBabyId: "",
                dialogBaby: false,
                babyName: "",
                BackupionChangea: [],
                dialogBackup: false,
                tableData: [],
                active: 0,
                babyID: "",
                dialogUser: false,
                searchList: {
                    total: ""
                },
                searchList2: {
                    total: "",
                    pn: 1
                },
                list: {},
                dayNum: "",
                fileList: [],
                babyid: "",
                upNum: "",
                tableData2: [],
                options: [
                    {
                        value: "测试店铺",
                        label: "测试店铺",
                        children: [
                            {
                                value: "1",
                                label: "1"
                            }
                        ]
                    },
                    {
                        value: "测试店铺2",
                        label: "测试店铺2",
                        children: [
                            {
                                value: "569661115879",
                                label: "569661115879"
                            }
                        ]
                    }
                ],
                selectedOptions: [],
                toBabyid: "",
                selectedOptions2: [],
                toBabyName: ""
            };
        },
        methods: {

            handleRemove(file, fileList) {
                this.fileNum -= 1;
                console.log(this.fileNum);
            },
            getBabyIdList() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getBabyIdList"
                    }).then(function (response) {
                    _this.options = response.data.data;
                });
            },
            addBabyIda() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "addBabyId",
                        babyId: _this.addBabyId,
                        shopName: _this.addShopName,
                        addBabyName: _this.addBabyName
                    }).then(function (response) {
                    _this.$message({
                        type: "success",
                        message: "添加成功"
                    });
                    _this.dialogBaby = false;
                    _this.getBabyIdList();
                });
            },
            getShops() {
                let _this = this;
                _this.$http
                    .post("/api/backUpNew.php", {
                        id: "copyList",
                        babyId: _this.babyid,
                        toId: _this.toBabyid,
                        toBabyName: _this.toBabyName
                    }).then(function (response) {
                    _this.$message({
                        type: response.data.status,
                        message: response.data.msg
                    });
                });
            },
            copyList() {
                let _this = this;
                _this.$http
                    .post("/api/backUpNew.php", {
                        id: "copyList",
                        babyId: _this.babyid,
                        toId: _this.toBabyid,
                        toBabyName: _this.toBabyName
                    }).then(function (response) {
                    _this.$message({
                        type: response.data.status,
                        message: response.data.msg
                    });
                });
            },
            handleChange2(value) {
                this.toBabyid = value[1];
                this.getBackupList();
            },
            handleChange(value) {
                this.babyid = value[1];
                this.getBackupList();
                this.$router.push("/backup4/" + value[1]);
            },
            BackupionChange(val) {
                this.BackupionChangea = val;
            },
            BackupionOk() {
                let _this = this;
                _this.$http
                    .post("/api/backUpNew.php", {
                        id: "backupToNew",
                        toID: _this.babyid,
                        time: _this.active,
                        data: JSON.stringify(_this.BackupionChangea)
                    }).then(function (response) {
                    _this.dialogBackup = false;
                    _this.$message({
                        type: "success",
                        message: "载入成功"
                    });
                    _this.getBackupList();
                });
            },
            pnChange() {
            },
            /*pnChange2(a) {
                        getBackupList2
                    },*/
            getBackupList2() {
                let _this = this;
                _this.$http
                    .post("/api/getBackupList.php", {
                        id: "getBackupListNew",
                        name: _this.babyName,
                        search: JSON.stringify(_this.searchList2),
                        type: "2"
                    }).then(function (response) {
                    _this.tableData2 = response.data.data;
                    _this.searchList2.total = parseInt(response.data.total);
                });
            },
            getBackupList() {
                let _this = this;
                _this.$http
                    .post("/api/backUpNew.php", {
                        id: "getBackupListNew",
                        name: _this.babyName,
                        search: JSON.stringify(_this.searchList2),
                        type: "2",
                        day: this.active,
                        babyId: _this.babyid
                    }).then(function (response) {
                    _this.tableData = response.data.data;
                    _this.searchList.total = parseInt(response.data.total);
                });
            },
            compress(img) {
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext("2d");
                let initSize = img.src.length;
                let width = img.width;
                let height = img.height;
                canvas.width = width;
                canvas.height = height;
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, width, height);

                let ndata = canvas.toDataURL("image/jpeg", 0.75);
                console.log("*******压缩后的图片大小*******");
                console.log(ndata.length);
                return ndata;
            },
            fileChange(file, fileList) {
                console.log(file, fileList);
                this.fileNum = fileList.length;
                console.log(this.fileNum);
            },
            newFiles(a) {
                let reader = new FileReader();
                let _this = this;
                console.log(a);

                reader.readAsDataURL(a.file);
                reader.onload = result => {
                    let fileInfo = {
                        name: a.file.name,
                        base: result.currentTarget.result
                    };
                    this.fileList.push(fileInfo);
                    // console.log(result.currentTarget.result);
                    console.log("********未压缩前的图片大小********");
                    console.log(result.currentTarget.result.length);

                    let img = new Image();
                    img.src = result.currentTarget.result;
                    img.onload = () => {
                        if (result.currentTarget.result.length > 10000) {
                            this.src = this.compress(img);
                        } else {
                            this.src = result.currentTarget.result;
                        }
                        this.upNum++;
                        console.log(this.upNum, this.fileNum);
                        if (this.upNum === this.fileNum) {
                            this.$http
                                .post("/upload/back_new.php", {
                                    data: JSON.stringify(this.fileList),
                                    babyId: _this.list.babyID,
                                    text: _this.list.text2,
                                    day: _this.active
                                })
                                .then(response => {
                                    _this.getBackupList();
                                    _this.dialogUser = false;
                                    _this.$refs.upload2.clearFiles();
                                    _this.fileList = [];
                                    _this.upNum = 0;
                                    _this.fileNum = 0;
                                });
                        }
                    };

                    return false;
                };
            },
            activeDay(a) {
                this.active = a;
                this.getBackupList();
            },
            beforeupload() {
            },
            uploadSuccess() {
            },
            submitUpload(file) {
                //this.$refs.upload1.submit();
                this.$refs.upload2.submit();
            }
        },
        mounted() {
            let myDate = new Date();
            this.Month = myDate.getMonth() + 1;
            this.DateDay = myDate.getDate();
            // this.active = this.DateDay;
            this.active = 1;
            switch (true) {
                case [1, 3, 5, 7, 8, 10, 12].indexOf(this.Month) != -1:
                    this.dayNum = 31;
                    break;
                case [4, 6, 9, 11].indexOf(this.Month) != -1:
                    this.dayNum = 30;
                    break;
                default:
                    if (myDate.getFullYear() % 4 == 0) {
                        this.dayNum = 29;
                    }
                    this.dayNum = 28;
                    break;
            }
            this.babyid = this.$route.params.babyid;
            this.getBackupList();
            this.getBabyIdList();
        }
    };
</script>
<style>
    .paperz {
        height: 100%;
        padding: 30px;
    }

    .activeDateClass {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
    }

    .activeDateClass:hover {
        color: #fff;
        background-color: #409eff;
    }

    .dialogBaby {
        width: 320px;
    }
</style>
